$mci-line-height: 36px;
.el-menu {
  --el-menu-item-height: #{$mci-line-height};
  --el-menu-hover-bg-color: transparent;
  --el-menu-item-font-size: 14px;
  --el-menu-text-color: var(--color-text-4);
  border-right: none;
  &.el-menu--collapse {
    width: 58px;
  }

  .el-menu-item,
  .el-sub-menu__title {
    border-radius: 3px;
    padding-left: 20px !important;

    &.is-active {
      @include text-14__bold;
      color: var(--color-text-1);
      background-color: var(--color-brand-6);
    }
    &:not(.is-active):hover {
      color: var(--color-brand-6);
    }
  }

  .el-sub-menu {
    .el-menu-item {
      padding-left: 40px !important;
      height: #{$mci-line-height};
      line-height: #{$mci-line-height};
    }

    .el-sub-menu {
      .el-sub-menu__title {
        padding-left: 40px !important;
      }
      .el-menu-item {
        padding-left: 60px !important;
      }
    }
  }

  &.el-menu--collapse {
    .el-sub-menu {
      &.is-active {
        border-radius: 8px;
        background-color: var(--color-grey-9);

        .el-sub-menu__title {
          &:hover {
            background-color: var(--color-grey-9);
          }
        }

        i {
          color: var(--color-brand-6);
        }
      }
    }
  }
}
